<!--
 * @Author: zjj
 * @Date: 2019-11-29 14:01:32
 * @LastEditors: zjj
 * @LastEditTime: 2019-12-03 17:11:50
 -->
<!--  -->
<template>
    <div class="order-detail">
        <Nav title="订单明细">
            <template v-slot:left>
                <span class="back" @click="$router.back()"></span>
            </template>
        </Nav>
        <div class="tip flex">
            <span class="red-bar"></span>
            <span class="consult">累计共{{total}}单</span>
        </div>
        <div class="scroll-wrapper">
            <Scroll
                :preventDefault="true"
                :click="true"
                :tap="true"
                :pullup="true"
                :pulldown="true"
                @scrollToEnd="scrollToEnd"
                :data.sync="recordList"
                ref="myScroll"
            >
                <div>
                    <template v-for="(item,index) in recordList">
                        <div class="record-item" :key="index">
                            <div class="title flex justify-between aligin-center">
                                <span>{{item.order_no}}</span>
                                <span>{{item.created_time}}</span>
                            </div>
                            <div class="body">
                                <div>
                                    <span>活动名称</span>
                                    <span class="activity-name">{{item.activity_name}}</span>
                                </div>
                                 <div class="mt-12">
                                    <span>商品名称</span>
                                    <span class="activity-name">{{item.goods_name}}</span>
                                </div>
                                <div class="mt-12">
                                    <span>数量</span>
                                    <span class="activity-name">{{item.goods_num}}件</span>
                                </div>
                                <div class="winner-info">
                                    <div>赠送抽奖号码{{item.give_power}}个</div>
                                    <div>订单金额：¥{{item.goods_price}}</div>
                                    <div>我的收益：¥{{item.income}}</div>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </Scroll>
        </div>
    </div>
</template>

<script>
import Scroll from "../../components/Scroll";
import Nav from "../../components/Nav";
import {inviteOrder} from "../../api/api"
import page from "../../mixin/page";
export default {
   mixins: [page],
  components: { Scroll, Nav },
  data() {
    return {
      total:0,
      recordList: []
    };
  },
  computed: {},
  watch: {},
  methods: {
    _api() {
      inviteOrder({
        page: this.current_page + 1,
        user_id:this.$route.params.id
      }).then(({ data: { result } }) => {
        this.total=result.c;
        if (result && result.list.length != 0) {
          this.recordList = [...this.recordList, ...result.list];
          this.current_page += 1;
          this.last_page = this.current_page + 1;
        } else {
          this.last_page = this.current_page;
        }
        this.loading = false;
      });
    }
  },
  created() {},
  mounted() {
    this._api()
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.order-detail {
  height: 100%;
  .tip {
    margin-left: 24px;
    margin-top: 24px;
    .red-bar {
      width: 4px;
      height: 16px;
      background: rgba(246, 93, 93, 1);
      border-radius: 2px;
    }
    .consult {
      margin-left: 10px;
      font-size: 14px;
      color: #a3a3a3;
    }
  }
  .scroll-wrapper {
    padding: 10px 19px;
    margin-top: 18px;
    box-sizing: border-box;
    height: calc(100% - 103px);
    overflow: hidden;
    .record-item {
      line-height: 18px;
      margin-bottom: 13px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 15px 0px rgba(47, 43, 117, 0.1);
      border-radius: 8px;
      .title {
        padding: 0 12px;
        height: 39px;
        border-bottom: 1px solid #e9e9ef;
      }
      .body {
        padding-left: 12px;
        padding-top: 12px;
        font-size: 14px;
        color: #666666;
      }
      .activity-name {
        margin-left: 10px;
      }
      .winner-info {
        margin-top: 26px;
        font-size: 14px;
        line-height: 24px;
        color: #f35948;
      }
    }
  }
}
</style>